/*
 * @Author: C.
 * @Date: 2023-06-07 15:46:42
 */
import { IBackMsg } from '/~/utils/wsType';
import { dataHandle } from '../data/index';
import { Avatar } from 'ant-design-vue';
import { getImgUrl } from '/~/utils/system/index';
import { msgEnum, MsgTypeEnum } from '/@/maps/baseData/msgEnum';
import { useMessage } from '/@/hooks/web/useMessage';
const { notification } = useMessage();

// 处理Notification信息
export function handleNotification(msg: IBackMsg) {
  // message: VueNode | (() => VueNode);
  // description?: VueNode | (() => VueNode);
  // btn?: VueNode | (() => VueNode);
  // key?: string;
  // onClose?: () => void;
  // duration?: number | null;
  // icon?: VueNode | (() => VueNode);
  // placement?: NotificationPlacement;
  // style?: CSSProperties;
  // prefixCls?: string;
  // class?: string;
  // readonly type?: IconType;
  // onClick?: () => void;
  // top?: string;
  // bottom?: string;
  // getContainer?: () => HTMLElement;
  // closeIcon?: VueNode | (() => VueNode);
  // appContext?: any;
  notification.open({
    top: '50px',
    message: handleMessage(msg),
    description: handleDescription(msg),
    duration: msg.Type == MsgTypeEnum.NOTICE ? 3 * 60 * 10 : 3,
  });
}

// 消息头
function handleMessage(msg: IBackMsg) {
  const { Type, FromUser } = msg;
  return (
    <div>
      <span>
        {FromUser.PhotoUrl ? (
          <Avatar src={getImgUrl(FromUser.PhotoUrl)} style="background-color: #0960bd"></Avatar>
        ) : (
          <Avatar style="background-color: #0960bd">{FromUser.UserName}</Avatar>
        )}
        <span class="pl-2 font-bold pt-1">
          {FromUser.UserName} 的 {msgEnum.getLabel(Type)}
        </span>
      </span>
    </div>
  );
}
// 内容体
function handleDescription(msg: IBackMsg) {
  const { Content, SendTime } = msg;
  return (
    <div>
      <div class=" text-dark-50 line-clamp-3 max-h-36">{Content}</div>
      <div class="flex justify-end text-gray-400 overflow-hidden">
        {dataHandle(SendTime, 'time')}
      </div>
    </div>
  );
}
